<template>
	<view class="container">
		<view class="brand-list">
			<view @tap="gotoBrandDetail(item.id)" class="item" v-for="(item,index) in brandList" :key="index">
				<view class="h">
					<view class="l">{{item.name}}</view>
					<view class="r">进店看看</view>
				</view>
				<view class="img-bg">
					<image :src="item.picUrl" background-size="cover"></image>
				</view>
				<view class="txt-box">
					<view class="line">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brandList: [],
				page: 1,
				size: 10,
				totalPages: 1
			}
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.getBrandList();
		},
		onReachBottom() {
			if (this.totalPages > this.page) {
				this.page= this.data.page + 1;
			} else {
				return false;
			}

			this.getBrandList();
		},
		methods: {
			gotoBrandDetail(detailId) {
				uni.navigateTo({
					url: '../brandDetail/brandDetail?id=' + detailId
				})
			},
			getBrandList: function() {
				uni.showLoading({
					title: '加载中...',
				});
				let that = this;
				that.$util.request(that.$api.api.BrandList, {
					page: that.page,
					size: that.size
				}).then(function(res) {
					if (res.errno === 0) {
						that.brandList= that.brandList.concat(res.data.brandList);
						that.	totalPages= res.data.totalPages;
					}
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style>
	.brand-list .item {
		display: block;
		width: 750rpx;
		height: 500rpx;
		position: relative;
		background: #fff;
		margin-top: 5rpx;
		margin-bottom: 30rpx;
	}

	.brand-list .item .img-bg {
		position: absolute;
		left: 0;
		z-index: 0;
		width: 750rpx;
		height: 400rpx;
		overflow: hidden;
	}

	.brand-list .item .img-bg image {
		width: 750rpx;
		height: 400rpx;
	}

	.brand-list .item .txt-box {
		position: absolute;
		left: 0;
		top: 0;
		display: table;
		z-index: 0;
		width: 750rpx;
		height: 317rpx;
	}

	.brand-list .item .line {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		height: 63rpx;
		line-height: 63rpx;
	}

	.brand-list .item .line text {
		font-size: 35rpx;
		font-weight: 700;
		text-shadow: 1rpx 1rpx rgba(0, 0, 0, 0.32);
		color: #fff;
	}

	.brand-list .item .line .s {
		padding: 0 10rpx;
		font-size: 40rpx;
	}

	.brand-list .h {
		height: 100rpx;
		line-height: 100rpx;
		margin-left: 31.25rpx;
		padding-right: 31.25rpx;
		border-bottom: 1px solid #f4f4f4;
		font-size: 30rpx;
		color: #333;
	}

	.brand-list .h .l {
		float: left;
	}

	.brand-list .h .r {
		float: right;
		margin-top: 19rpx;
		height: 64.5rpx;
		margin-right: 5rpx;
		line-height: 64.5rpx;
		text-align: center;
		padding: 0 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #fff;
		background: #85c43f;
	}
</style>
